<template>
    <div class="exam-container">
        <el-skeleton :loading="isFirst" :rows="15" animated>
      <el-descriptions title="试卷详情" direction="vertical" :column="3" border>
        <!-- column为每行2列 如果列中将span设置为2 则何为1列 -->
  
        <el-descriptions-item label="试卷名" :span="2" width="50%">
          <el-tag>{{name}}</el-tag> 
        </el-descriptions-item>
        <el-descriptions-item label="时间" width="50%" :span="1">
          <el-tag>{{createTime}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="标签" :span="1">
          <el-tag>{{labels}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="类型" :span="1">
          <el-tag>{{type==1?"普通试卷":"高难度试卷"}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="组卷方式" :span="1" >
            <el-tag>{{mode==1?"人工":"随机"}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="作者" :span="1">
          <el-tag>{{author=="" || author==null ?"-":author}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="发布" :span="1">
          <el-tag type="success"  v-if="isPublish==1 ||isPublish==null">是</el-tag>
          <el-tag type="danger" v-else>否</el-tag>
        </el-descriptions-item>


        <el-descriptions-item label="禁用" :span="1">
            <el-tag type="success" v-if="isBan==0 ||isBan==null">否</el-tag>
            <el-tag type="danger" v-else>是</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="使用次数" :span="1">
            <el-tag type="danger" v-if="useCount==0 ||useCount==null">0</el-tag>
            <el-tag type="success" v-else>{{useCount}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="难度" :span="1">
            <el-tag type="primary">{{lv}}</el-tag>
        </el-descriptions-item>


        <el-descriptions-item label="题目数" :span="1">
          <el-tag>{{count}}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="题目详情" :span="3">
          <el-table :data="questions"  >
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column
            label="题干"
            prop="content"
            :show-overflow-tooltip="true"
            class="last_commoner"
          ></el-table-column>
          <el-table-column label="题型" prop="count" width="100">
            <template #default="scope">
              <el-tag type="primary" size="small" >
                   {{scope.row.type==1?"选择题":"简答题"}}
                </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="分数" prop="score" width="100">
            <template #default="scope">
              <el-tag type="warning" size="small">{{ scope.row.score }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="标签" prop="labels" :show-overflow-tooltip="true">
          </el-table-column>

          <el-table-column label="难度" prop="lv" :show-overflow-tooltip="true">
          </el-table-column>
       
        </el-table>
        </el-descriptions-item>




        <el-descriptions-item label="考试详情" :span="3">
          <el-table :data="arranges"  >
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column
            label="安排"
            prop="name"
            :show-overflow-tooltip="true"
            class="last_commoner"
          ></el-table-column>
          <el-table-column label="开始时间" prop="beginTime" >
            <template #default="scope">
              <el-tag type="primary" size="small" >
                   {{scope.row.beginTime}}
                </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="结束时间" prop="endTime" >
            <template #default="scope">
              <el-tag type="primary" size="small" >
                   {{scope.row.endTime}}
                </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="阅卷" prop="isFinish" >
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.isFinish==0" size="small" >已完成</el-tag>
              <el-tag type="danger" v-else size="small" >待阅卷</el-tag> 
            </template>
          </el-table-column>

          <el-table-column label="安排人数" prop="allCount" >
            <template #default="scope">
              <el-tag type="primary"  size="small" >{{scope.row.allCount}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="考试人数" prop="examCount" >
            <template #default="scope">
              <el-tag type="primary"  size="small" >{{scope.row.examCount}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="交卷人数" prop="completeCount">
            <template #default="scope">
              <el-tag type="primary"  size="small" >{{scope.row.completeCount}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="及格率" prop="passCount">
            <template #default="scope">
              <el-tag type="primary"  size="small" >{{scope.row.passCount}}%</el-tag>
            </template>
          </el-table-column>

          
          <el-table-column label="平均分" prop="avgScore" >
            <template #default="scope">
              <el-tag type="primary"  size="small" >{{scope.row.avgScore==null?0:scope.row.avgScore }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作"  >
            <template #default="scope">
             <el-button type="primary" @click="detail(scope.row)">详情</el-button>
            </template>
          </el-table-column>

        </el-table>
        </el-descriptions-item>


        
        <el-descriptions-item label="平均成绩" :span="3">
              <div style="height:200px"></div>
        </el-descriptions-item>
        
      </el-descriptions>
    </el-skeleton>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive,toRefs, watchEffect } from 'vue'
import { getSingleTestPaper } from '@/api/testpaper'
import { useRouter,useRoute } from 'vue-router'
import type testpaperDetail from '@/dto/exam/testpaper/detailsDto'
import { ElMessage } from 'element-plus'
export default defineComponent({
    setup() {
         //参数获取常用
        const routes = useRoute();
        //路由跳转常用
        const router = useRouter();
        
        const data=reactive<testpaperDetail>({
             id:routes.params.id,
             isFirst:true,
             isLoad:true,
            name: "",
            createTime: "",
            labels: "",
            type: 1,
            mode: 1,
            author: "",
            isPublish: 0,
            isBan: 0,
            useCount: 0,
            lv: 1,
            count: 0,
            questions:[],
            arranges:[],

        })

        const events={
              detail:(val:any)=>{
                router.push(`/exam/arrange/review/${val.id}`);
              },
            getSingleTestPaper:()=>{
                getSingleTestPaper({id:data.id}).then((res:any)=>{
                    if(res.result==0){
                        data.name=res.data.name;
                         data.createTime=res.data.createTime;
                         data.labels=res.data.labels;
                         data.type=res.data.type;
                         data.mode=res.data.mode;
                         data.author=res.data.author;
                         data.isPublish=res.data.isPublish;
                         data.isBan=res.data.isBan;
                         data.lv=res.data.lv;
                         data.count=res.data.count;
                         data.questions=res.data.questions;
                         data.arranges=res.data.arranges;
                         data.useCount=res.data.useCount;
                         data.isFirst=false;
                    }else{
                        ElMessage.error("服务器异常");
                    }
                   
                    
                })
            }
        }

        watchEffect(()=>{
            events.getSingleTestPaper();
        })
        return{
          ...toRefs(data),
          ...events
        }
    },
})
</script>
